<template>
	<view class="container">
		<view class="lesson">
			<uni-forms ref="form" :model="form" labelWidth="80px" validateTrigger="bind">
				<uni-forms-item label="学号" name="studentCode">
					<uni-easyinput v-model="form.studentCode" placeholder="请输入学号" :disabled="true" />
				</uni-forms-item>
				<uni-forms-item label="归属部门" name="deptId" v-if="checkRole(['admin','manager'])">
					<treeselect v-model="form.deptId" :options="deptOptions" noResultsText="暂无结果"  :normalizer="normalizer" :show-count="true" placeholder="请选择归属部门" />
				</uni-forms-item>
				<uni-forms-item label="学员姓名" name="studentName">
					<uni-easyinput v-model="form.studentName" placeholder="请输入学员姓名" />
				</uni-forms-item>
				<uni-forms-item label="手机号" name="phone" v-if="checkRole(['admin','manager'])">
					<uni-easyinput v-model="form.phone" placeholder="请输入手机号" />
				</uni-forms-item>
				<uni-forms-item label="生日" name="birthday">
					<uni-datetime-picker type="date" :clear-icon="true" v-model="form.birthday" placeholder="请选择生日" />
				</uni-forms-item>
				<uni-forms-item label="缴费" name="money" v-if="checkRole(['admin','manager'])">
					<uni-easyinput v-model="form.money" type="number" placeholder="请输入缴费" />
				</uni-forms-item>
				<uni-forms-item label="节数" name="classNum" v-if="checkRole(['admin','manager'])">
					<uni-easyinput v-model="form.classNum" type="number" placeholder="请输入节数" />
				</uni-forms-item>
				<uni-forms-item label="状态" name="studentStatus" v-if="checkRole(['admin','manager'])">
					<uni-data-select v-model="form.studentStatus" :localdata="studentStatusRange"
						placeholder="请选择状态"></uni-data-select>
				</uni-forms-item>
				<uni-forms-item label="训练类型" name="trainingType" v-if="checkRole(['admin','manager'])">
					<uni-data-select v-model="form.trainingType" :localdata="trainingTypeRange"
						placeholder="请选择训练类型"></uni-data-select>
				</uni-forms-item>
				<uni-forms-item label="期限类型" name="expiredType" v-if="checkRole(['admin','manager'])">
					<uni-data-select v-model="form.expiredType" :localdata="expiredTypeRange"
						placeholder="请选择期限类型"></uni-data-select>
				</uni-forms-item>
				<uni-forms-item label="报名日期" name="joinTime" v-if="checkRole(['admin','manager'])">
					<uni-datetime-picker type="date" :clear-icon="true" v-model="form.joinTime" placeholder="请选择报名日期" />
				</uni-forms-item>
				<uni-forms-item label="备注" name="remark" v-if="checkRole(['admin','manager'])">
					<uni-easyinput v-model="form.remark" placeholder="请输入备注" />
				</uni-forms-item>
			</uni-forms>
			<button type="primary" @click="submit"
				style="color:#ffffff;backgroundColor:#993399;borderColor:#993399;">提交</button>
		</view>
	</view>
</template>

<script>
	import { checkPermi, checkRole } from "@/utils/permission"; // 权限判断函数
	import { updateStudent, listStudentNames } from "@/api/puyu/student";
	import { deptTreeSelect } from "@/api/system/user";
	import Treeselect from "@riophae/vue-treeselect";
	import "@riophae/vue-treeselect/dist/vue-treeselect.css";
	import { getDicts } from "@/api/system/dict/data";

	export default {
		components: { Treeselect },
		data() {
			return {
				deptOptions: [], // 部门树选项
				puyuStudentStatusOptions: [], // 学员状态
				puyuTrainingTypeOptions: [], // 训练类型
				puyuStuentExpiredTypeOptions: [], // 期限类型
				form: {
					studentCode: "",
					deptId: "",
					stadiumId: "",
					studentName: "",
					phone: "",
					birthday: "",
					money: "",
					classNum: "",
					studentStatus: 1,
					trainingType: "",
					expiredType: 3,
					joinTime: "",
					remark: ""
				},
				rules: {
					studentCode: {
						rules: [{
							required: true,
							errorMessage: '学号不能为空'
						}]
					},
					deptId: {
						rules: [{
							required: true,
							errorMessage: '归属部门不能为空'
						}]
					},
					studentName: {
						rules: [{
							required: true,
							errorMessage: '学员姓名不能为空'
						},{
							validateFunction: (rule, value, data, callback) => {
								// 异步需要返回 Promise 对象
								return new Promise((resolve, reject) => {
									let data = {'studentName': value};
									listStudentNames(data).then(response => {
										if (response.data.length) {
											if (this.form.studentId != response.data[0].studentId) {
												reject(new Error('有同名学员！'))
											} else {
												resolve()
											}
										} else {
											resolve()
										}
									});
								})
							}
						}]
					},
					phone: {
						rules: [{
							required: true,
							errorMessage: '手机号不能为空'
						}, {
              pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
              errorMessage: '请输入正确的手机号码'
            }]
					},
				}
			}
		},
		computed: {
			studentStatusRange() {
				if (!this.puyuStudentStatusOptions) {
					return [];
				}
				let arr = [];
				this.puyuStudentStatusOptions.map(item => {
					let obj = {
						text: item.dictLabel,
						value: item.dictValue,
					}
					arr.push(obj);
				});
				return arr;
			},
			trainingTypeRange() {
				if (!this.puyuTrainingTypeOptions) {
					return [];
				}
				let arr = [];
				this.puyuTrainingTypeOptions.map(item => {
					let obj = {
						text: item.dictLabel,
						value: item.dictValue,
					}
					arr.push(obj);
				});
				return arr;
			},
			expiredTypeRange() {
				if (!this.puyuStuentExpiredTypeOptions) {
					return [];
				}
				let arr = [];
				this.puyuStuentExpiredTypeOptions.map(item => {
					let obj = {
						text: item.dictLabel,
						value: item.dictValue,
					}
					arr.push(obj);
				});
				return arr;
			},
		},
		onLoad(option) {
		  const item = JSON.parse(decodeURIComponent(option.item));
		  this.form = item;
			this.form.studentStatus = item.studentStatus + '';
			this.form.trainingType = item.trainingType + '';
			this.form.expiredType = item.expiredType + '';
		},
		created() {
			this.getDeptTree();
			this.getDictList();
		},
		onReady() {
			this.$refs.form.setRules(this.rules)
		},
		methods: {
			checkPermi,
			checkRole,
			/** 查询部门下拉树结构 */
			getDeptTree() {
				deptTreeSelect().then(response => {
					this.deptOptions = response.data;
				});
			},

			/** 查询字典数据 */
			getDictList() {
				getDicts("puyu_student_status").then(response => {
					this.puyuStudentStatusOptions = response.data;
				});
				getDicts("puyu_training_type").then(response => {
					this.puyuTrainingTypeOptions = response.data;
				});
				getDicts("puyu_student_expired_type").then(response => {
					this.puyuStuentExpiredTypeOptions = response.data;
				});
			},
			normalizer(node){
				// 去掉children = null的属性
				if(node.children && !node.children.length){
					delete node.children;
				}
				return {
					id: node.id,
					label: node.label,
					children: node.children
				}
			},
			submit(ref) {
				this.$refs.form.validate().then(res => {
					updateStudent(this.form).then(response => {
						this.$modal.msgSuccess("修改成功!")
						this.$tab.navigateBack();
					})
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #ffffff;
	}

	.lesson {
		padding: 15px;
		background-color: #fff;
	}

	.segmented-control {
		margin-bottom: 15px;
	}

	.button-group {
		margin-top: 15px;
		display: flex;
		justify-content: space-around;
	}

	.form-item {
		display: flex;
		align-items: center;
		flex: 1;
	}

	.button {
		display: flex;
		align-items: center;
		height: 35px;
		line-height: 35px;
		margin-left: 10px;
	}
</style>